<template>
  <div id="searchother">
    <div class="input-control search-box search-box-circle has-icon-left has-icon-right">
      <input
        type="search"
        class="form-control search-input"
        placeholder="搜索"
        v-model="msg"
      >
      <label
        class="input-control-icon-left search-icon"
        @click="search"
      ><i class="icon icon-search"></i></label>
      <a
        href="#"
        class="input-control-icon-right search-clear-btn"
        @click="remove"
      ><i class="icon icon-remove"></i></a>
    </div>
    <div id="hot">
      <h5>热搜</h5>
      <ul id="uul">
        <li
          v-for="(item,index) in title"
          :key="index"
        >
          <b>{{index+1}}</b> {{item.msg}}
          <span :class="[{label:item.tag!=null},{'label-danger':item.tag=='热'},{'label-info':item.tag=='新'}]">
            {{item.tag}}
          </span>

        </li>
      </ul>
    </div>
    <div
      id="history"
      v-show="showFlag"
    >
      <div id="history_content">
        <div>
          <h5>搜索历史</h5>
        </div>
        <div>
          <h6 @click="show()"> <span class="btn btn-info">{{show_msg}}</span> </h6>
        </div>
      </div>
      <div
        id="content"
        v-show="showFlag_content"
      >
        <div
          v-for="(item,index) in list"
          :key="index"
        >
          <span class="history_content">{{item}}</span>
        </div>
      </div>
      <p
        style="text-align: center;"
        @click="trash()"
      >
        <i class="icon-trash"></i> 清空搜索历史
      </p>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '',
      title: [{ msg: '鬼灭之刃', tag: '热' },
        { msg: '仙王的日常生活', tag: '热' },
        { msg: '半佛仙人', tag: '热' },
        { msg: '4月4号全国性哀悼', tag: '热' },
        { msg: '周深' },
        { msg: '瑞幸咖啡暴跌80%' },
        { msg: '老番茄' },
        { msg: '全球确诊超92万', tag: '新' },
        { msg: '李子染 骑马踏青', tag: '新' },
        { msg: '第五人格', tag: '新' }
      ],
      list: [],
      show_msg: '隐藏',
      showFlag: false,
      showFlag_content: true
    }
  },
  methods: {
    remove () {
      this.msg = ''
    },
    search () {
      if (this.msg === '') {
        alert('请输入')
        return
      }
      this.list.unshift(this.msg)
      this.msg = ''
      if (this.list.length > 0) {
        this.showFlag = true
      }
    },
    show () {
      this.showFlag_content = !this.showFlag_content
      if (this.show_msg === '隐藏') {
        this.show_msg = '展开'
      } else {
        this.show_msg = '隐藏'
      }
    },
    trash () {
      this.list = []
      this.showFlag = false
    }
  }
}
</script>

<style scoped>
#hot {
  width: 100%;
  background: white;
  padding: 5px;
}
#hot > h5 {
  margin: 10px;
}
#uul > li {
  width: 45%;
  display: inline-block;
  margin: 6px;
}

#history_content {
  width: 100%;
  overflow: hidden;
}
#history_content > div {
  float: left;
  margin: 10px;
}

#history_content > div:nth-child(2) {
  float: right;
}

#content {
  width: 100%;
  overflow: hidden;
}

#content > div {
  float: left;
  margin: 10px;
}
.history_content {
  padding: 5px;
  font-size: 15px;
  background: white;
}
</style>
